﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UCH5.aspx.cs" Inherits="MTRC.ODMS.Web.SOM.UserControl.UCH5" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <meta http-equiv="x-ua-compatible" content="IE=edge" />
    
</head>
<body>
    <div class="htmleaf-container">
	
		<div class="container">
        <div class="row" style="display:none">
            <div class="col-xs-12">
                <h3>基本例子：</h3>
                <p>Sign Below:</p>
                <div class="js-signature"></div>
            </div>
        </div>
        <div class="row">
	        <div class="col-xs-12">
		        <h3>高级例子：</h3>
		        <p>Sign Below:</p>
		        <div class="js-signature" data-width="600" data-height="200" data-border="1px solid black" data-line-color="#bc0000" data-auto-fit="true"></div>
		        <p><button id="clearBtn" class="btn btn-default" onclick="clearCanvas();">Clear Canvas</button>&nbsp;<button id="saveBtn" class="btn btn-default" onclick="saveSignature();" disabled>Save Signature</button></p>
		        <div id="signature">
			        <p><em>Your signature will appear here when you click "Save Signature"</em></p>
		        </div>
	        </div>
        </div>
		</div>
	
	</div>
	
	
	<script type="text/javascript" src="../../Javascript/SOM/SignatureH5/jquery-1.11.0.min.js"></script>
	<script type src="../../Javascript/SOM/SignatureH5/jq-signature.js"></script>
	<script type="text/javascript">
	    $(document).on('ready', function () {
	        if ($('.js-signature').length) {
	            $('.js-signature').jqSignature();
	        }
	    });

	    function clearCanvas() {
	        $('#signature').html('<p><em>Your signature will appear here when you click "Save Signature"</em></p>');
	        $('.js-signature').eq(1).jqSignature('clearCanvas');
	        $('#saveBtn').attr('disabled', true);
	    }

	    function saveSignature() {
	        $('#signature').empty();
	        var dataUrl = $('.js-signature').eq(1).jqSignature('getDataURL');
	        var img = $('<img>').attr('src', dataUrl);
	        $('#signature').append($('<p>').text("Here's your signature:"));
	        $('#signature').append(img);
	    }

	    $('.js-signature').eq(1).on('jq.signature.changed', function () {
	        $('#saveBtn').attr('disabled', false);
	    });
	</script>
</body>

</html>
